<template>
    <div class="login">
       <div class="container">
          <header>Sanhuamao</header>
          <div class="content">
             <input
                class="input"
                type="text"
                name="username"
                placeholder="用户名"
                v-model="loginForm.username"
             />
             <input
                class="input"
                type="password"
                name="password"
                placeholder="密码"
                v-model="loginForm.password"
             />
             <s-checkbox
                :checked="loginForm.remember"
                name="remember"
                @update="update"
                label="记住密码"
                style="
                   font-weight: 200;
                   margin: 14px 0px 10px 36px;
                   align-self: flex-start;
                "
             />
             <button class="button" @click="login">登录</button>
          </div>
       </div>
    </div>
 </template>

<script lang="ts" setup>
import { SCheckbox } from "@/components"
import { useUser } from "@/hooks"
const { loginForm, login } = useUser()

const update = (param) => {
  loginForm[param.name] = param.value
}

</script>

 <style scoped lang="less">
    .login {
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
       bottom: 0;
       background-color: #f4f4f4;
       .container {
          position: absolute;
          width: 450px;
          top: 16%;
          left: 50%;
          margin-left: -225px;
          text-align: center;

          header {
             font-size: 2em;
             font-weight: 800;
             color: #747474;
             text-align: center;
             font-weight: bold;
             margin-bottom: 16px;
          }
          .content {
             padding: 10px 30px;
             align-items: center;
             display: flex;
             flex-direction: column;
             background: #fff;
             box-shadow: @bigShadow;
             border-radius: @smallRadius;
             border: 1px solid @borderColor;
             .input {
                box-sizing: border-box;
                width: 80%;
                padding: 12px 20px;
                border: 1px solid #cccbcb;
                border-radius: 6px;
                letter-spacing: 1px;
                margin-top: 30px;
             }
             input:focus {
                outline: none;
                -webkit-box-shadow: 0 0 5px rgb(66, 164, 224);
                box-shadow: 0 0 5px rgb(66, 164, 224);
             }
             .input-container {
                margin-top: @itemSpace;
             }
          }
          .button {
             margin: 24px 16px;
             background-color: #0b5489;
             width: 80%;
             text-align: center;
             height: 40px;
             border-radius: 7px;
             color: white;
             font-weight: 700;
             cursor: pointer;
          }
       }
    }
 </style>
